<template>
  <div class="shopCart">
    <tips></tips>
    <!-- 复选框组 -->
    <!-- 默认ifShowStep 为false,disalbed为false;当点击了编辑的时候为true 我们让disabled为true,否则为false -->
    <van-checkbox-group v-model="result" :disabled="ifShowStep">
      <van-checkbox
        @click="onHandleChecked(item)"
        v-for="item in cartList"
        :key="item.id"
        :name="item.goods_id"
        class="chx"
        ref="chx"
      >
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price"
            :origin-price="item.market_price"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <!-- 删除商品按钮 -->
          <template #right>
            <van-button
              @click="delGood(item)"
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
        <!-- 步进器 -->
        <van-stepper
          v-show="ifShowStep"
          @change="onChangeStep(item)"
          v-model="item.number"
        />
      </van-checkbox>
    </van-checkbox-group>
    <!-- 提交 -->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox :disabled="ifShowStep" v-model="checkedAll"
        >全选</van-checkbox
      >
      <template #tip>
        累计共<span>{{ cartTotal.goodsCount }}</span
        >件商品,可点击
        <van-button
          @click="ifShowStep = !ifShowStep"
          style="vertical-align: middle"
          :type="ifShowStep ? 'danger' : 'primary'"
          size="mini"
          >{{ ifShowStep ? "完成编辑" : "编辑" }}</van-button
        >
        按钮进行商品数量的修改
      </template>
    </van-submit-bar>
  </div>
</template>
<script>
import tips from "@/components/tips/tips.vue";
import {
  GetCartList,
  GetCheckedData,
  GoodStepNum,
  DeleteGood,
} from "@/request/api";
export default {
  data() {
    return {
      // 复选框组
      result: [],
      cartList: [], //购物车数组
      cartTotal: {}, //商品总价和总计
      ifShowStep: false, //点击按钮是否显示或隐藏步进器 关键
    };
  },
  created() {
    GetCartList().then((res) => {
      this.renderCartListFn(res.data);
    });
  },
  computed: {
    checkedAll: {
      get() {
        return this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount
          ? true
          : false;
        //或者 return this.result.length === this.cartList.length?true:false
      },
      set(val) {
        if (this.ifShowStep) {
          //如果为true说明 是修改状态 需要把所有的复选框禁用
          return;
        } else {
          let arr = [];
          this.cartList.map((item) => {
            arr.push(item.product_id);
          });
          GetCheckedData({
            isChecked: val ? 1 : 0,
            productIds: arr.join(","),
          }).then((res) => {
            if (res.errno == 0) {
              this.renderCartListFn(res.data);
            }
          });
        }
      },
    },
  },
  methods: {
    //渲染购物车列表
    renderCartListFn(data) {
      let { cartList, cartTotal } = data;
      this.cartList = cartList;
      this.cartTotal = cartTotal;
      //清空数组
      this.result = [];
      this.cartList.map((val) => {
        if (val.checked == 1) {
          this.result.push(val.goods_id);
        }
      });
    },
    //选择复选框
    onHandleChecked(item) {
      if (this.ifShowStep) {
        //如果为true说明 是修改状态 需要把所有的复选框禁用
        return;
      } else {
        GetCheckedData({
          isChecked: item.checked == 1 ? 0 : 1,
          productIds: item.product_id.toString(),
        }).then((res) => {
          if (res.errno == 0) {
            this.renderCartListFn(res.data);
          }
        });
      }
    },
    // 商品的添加与减少
    onChangeStep(item) {
      console.log(item);
      GoodStepNum({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        if (res.errno == 0) {
          this.renderCartListFn(res.data);
        }
      });
    },
    //删除商品
    delGood(item) {
      // console.log(item)
      this.$dialog
        .confirm({
          title: "确认删除吗？",
        })
        .then(() => {
          DeleteGood({
            productIds: item.product_id.toString(),
          }).then((res) => {
            if (res.errno == 0) {
              this.renderCartListFn(res.data);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    onSubmit() {
    },
  },
  components: {
    tips,
  },
};
</script>
<style lang="less" scoped>
.van-submit-bar {
  bottom: 0.5rem;
}
.van-checkbox-group {
  background: #fff;
}
/deep/.van-checkbox__label {
  background: #fff;
  flex: 1;
}
/deep/.van-card {
  background: #fff;
}
.chx {
  position: relative;
  border-bottom: 1px solid #ccc;
  padding-left: 0.1rem;
  background: #fff;
}
.van-stepper {
  right: 10px;
  top: 30px;
  position: absolute;
  text-align: right;
  margin-bottom: 0.03rem;
}
.delete-button {
  height: 100%;
}
</style>